import echarts from "echarts";
const color = [
    "#d7797f",
    "#2dc6c8",
    "#b6a2dd",
    "#5ab1ed",
    "#feb880",
    "#db68a9",
    "#8d97b3",
    "#e5cf1c",
    "#97b552",
    "#afe72d",
    "#ea379c",
    "#1ceaed",
    "#f03d48",
    "#1e95e7",
    "#844cee"
];
export const options = {
    data() {
        return {
            // 直播查看趋势
            liveOption: {
                tooltip: {
                    trigger: 'axis',
                    formatter: "时间：{b}<br> 数量：{c}",
                },
                title: {
                    text: '直播查看趋势图',
                    x: 'center',
                    y: 10,
                    textStyle: {
                        color: '#fff',
                        fontWeight: 100,
                        fontSize: 16
                    }
                },
                grid: {
                    left: '30',
                    right: '45',
                    bottom: '20',
                    top: '60',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [],
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    }
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    axisLabel: {
                        formatter: '{value}次'
                    },
                    min: 'dataMin'
                },
                series: [{
                    name: 'Day',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        color: '#8d2ad9'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#0f89f5'
                        }, {
                            offset: 1,
                            color: '#8d2ad9'
                        }])
                    },
                    data: []
                }],
                animationDuration: 10000,
                animationDurationUpdate: 10000
            },
            // 信息公开数量
            disclosureOption: {
                tooltip: {
                    trigger: 'axis',
                    formatter: "{b}：{c}",
                },
                grid: {
                    left: '30',
                    right: '30',
                    bottom: '20',
                    top: '20',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        formatter: function (value) {
                            return value.slice(0, 4).split('').join('\n')
                        },
                        textStyle: {
                            color: "#fff",
                            fontSize: 14
                        },
                        interval: 0
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#ccc"
                            // width: 2 // 粗细
                        }
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#d4d011",
                            width: 1 // 粗细
                        }
                    },
                    axisTick: {
                        // 坐标轴 刻度
                        show: false, // 是否显示
                        inside: false, // 是否朝内
                        lineStyle: {
                            //刻度颜色
                            color: "#78716e"
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: false,
                        // 超过四个省略号
                        formatter: function (name) {
                            if (!name) return "";
                            if (name.length > 4) {
                                name = name.slice(0, 4) + '...';
                            }
                            return name;
                        },
                        textStyle: {
                            color: "#fff",
                            fontSize: 14
                        },
                        interval: 0
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#ccc"
                            // width: 2 // 粗细
                        }
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#d4d011",
                            width: 1 // 粗细
                        }
                    },
                    axisTick: {
                        // 坐标轴 刻度
                        show: false, // 是否显示
                        inside: false, // 是否朝内
                        lineStyle: {
                            //刻度颜色
                            color: "#78716e"
                        }
                    },
                },
                series: [{
                    data: [],
                    type: 'bar',
                    barMinHeight: 1, //最小高度
                    barCategoryGap:'50%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#f5b67e" // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: "#ee7f1e" // 100% 处的颜色
                            }], false)
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            color: "#FFF",
                            formatter:function(value){
                                if(value.dataIndex%2==1){
                                    return ''
                                }  
                            }
                        },
                    },
                }],
                animationDuration: 10000,
                animationDurationUpdate: 10000
            },
            // 各业态设备分布图
            equipmentOption: {
                title: {
                    text: '各业态设备分布图',
                    x: 'center',
                    y: 27,
                    textStyle: {
                        color: '#fff',
                        fontWeight: 100,
                        fontSize: 20
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}占比 : {d}%"
                },
                color: ['#14D1B0', '#FDC417'],
                series: [{
                    type: 'pie',
                    radius: ['20%', '30%'],
                    center: ['50%', '70%'],
                    label: {
                        normal: {
                            textStyle: {
                                color: '#fff'
                            },
                            // formatter: '{b}\n{c}家\n{d}%'
                            formatter: '{b}：{c}'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                return color[params.dataIndex];
                            }
                        },
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)"
                        }
                    },
                    minAngle: 15,
                    data: []
                }],
                animationDuration: 10000,
                animationDurationUpdate: 10000
            },
            // 设备在线趋势图
            OnLineOption: {
                tooltip: {
                    trigger: 'axis',
                    formatter: "时间：{b}<br> 数量：{c}",
                },
                title: {
                    text: '设备在线趋势图',
                    x: 'center',
                    y: 10,
                    textStyle: {
                        color: '#fff',
                        fontWeight: 100,
                        fontSize: 20
                    }
                },
                grid: {
                    left: '30',
                    right: '30',
                    bottom: '20',
                    top: '60',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [],
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['rgba(26,35,37,1)'],
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ccc'
                        }
                    },
                    axisLabel: {
                        formatter: '{value}个'
                    },
                    axisTick: {
                        show: false
                    },
                    min: 'dataMin'
                },
                series: [{
                    name: 'Day',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        color: '#8d2ad9'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#b27bfa'
                        }, {
                            offset: 1,
                            color: '#9093fb'
                        }])
                    },
                    data: [],
                }],
                animationDuration: 10000,
                animationDurationUpdate: 10000
            }
        }
    },
    methods: {
        timeAnimation(c, d) {
            let num = 0;
            let set = setInterval(() => {
                let xx = this[d]>100?Number((Number(this[d]) / 100).toFixed(0)):1;
                num += xx;
                this[c] = num.toString();
                if (num >= Number(this[d])) {
                    clearInterval(set);
                    this[c] = this[d];
                }
            }, 100);
        },
    }
}